<template>
  <div class="shopping_type items">
    <div class="toBtn toLeft" v-show="state.leftShow">
      <img src="/src/assets/image/xzf.png" alt="" @click="toLeft">
    </div>
    <div class="toBtn toRight" v-show="state.rightShow">
      <img src="/src/assets/image/xyf.png" alt="" @click="toRight">
    </div>

    <div class="scrollListBox" ref="scrollListRef">
      <div class="scroll-content">
        <div v-if="props.type == '1'" :class="state.index === -1 ? 'item_action' : 'item' " @click="scrollAction(0,-1)">
          Думаю, тебе нравится
        </div>
        <div v-if="props.type == '1'" v-for="(item,index) of props.scrollList"
             :class="state.index === index ? 'item_action' : 'item' " :key="index"
             @click="scrollAction(item.category_id,index)">{{ item.translated_name }}
        </div>
        <div v-if="props.type == '2'" v-for="(item,index) of props.scrollList"
             :class="state.index === index ? 'item_action' : 'item' " :key="index"
             @click="scrollAction(item.category_id,index)">{{ item.translated_name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" name="Shopping_list" setup>
import {ref, reactive, defineProps, onMounted, defineEmits, watch} from 'vue'
import {getCategoryList} from "@/api/api.ts";

const emits = defineEmits(['clickTab'])
const scrollListRef = ref()
const props = defineProps({
  scrollList: {
    type: Array,
    default: () => {
      return []
    }
  },
  type: {
    type: String,
    default: '1'
  }
})
const state = reactive({
  leftShow: false,
  rightShow: true,
  index: -1,
  timer: undefined,
  listData: []
})
const scrollAction = (categoryId: any, index: any) => {
  state.index = index
  emits('clickTab', categoryId)
}
const toRight = () => {
  scrollListRef.value.scrollLeft += 1000
  if (scrollListRef.value.scrollWidth - scrollListRef.value.scrollLeft <= 1400) state.rightShow = false
  if (scrollListRef.value.scrollLeft >= 0) state.leftShow = true
}
const toLeft = () => {
  scrollListRef.value.scrollLeft -= 1000
  if (scrollListRef.value.scrollLeft <= 0) state.leftShow = false
  if (scrollListRef.value.scrollWidth - scrollListRef.value.scrollLeft > 1400) state.rightShow = true
}
watch(() => props.scrollList, () => {

  if (props.type == '2') {
    console.log(props.scrollList)
    state.index = 0
    emits('clickTab', props.scrollList[0].category_id)
  }
},{
  deep: true,
})
onMounted(() => {
  // getCategoryListFun()
})

</script>

<style lang="less" scoped>
.shopping_type {
  position: relative;
  width: 100%;
  height: 60px;
  padding-top: 24px;
  padding-bottom: 10px;

  .toBtn {
    width: 80px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: white;

    img {
      width: 48px;
      height: 48px;
    }
  }

  .toLeft {
    position: absolute;
    left: 0;
    box-shadow: 12px 0px 5px -7px rgba(0, 0, 0, 0.2)
  }

  .toRight {
    position: absolute;
    right: 0;
    box-shadow: -12px 0px 5px -7px rgba(0, 0, 0, 0.2)
  }

  .scrollListBox::-webkit-scrollbar {
    display: none; /* WebKit */
  }

  .scrollListBox {
    width: 100%;
    overflow-x: auto;

    .scroll-content {
      display: flex;
      align-items: center;
    }

    .item {
      background: #F3F6F8;
      border-radius: 40px 40px 40px 40px;
      border: 1px solid #999999;
      padding: 15px 25px;
      margin-right: 16px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 800;
      font-size: 16px;
      color: #333333;
      line-height: 16px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      flex: 0 0 auto;
      cursor: pointer;
    }

    .item_action {
      background: #0070E9;
      border-radius: 40px 40px 40px 40px;
      border: 1px solid #999999;
      padding: 15px 25px;
      margin-right: 16px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 800;
      font-size: 16px;
      color: #ffffff;
      line-height: 16px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      flex: 0 0 auto;
      cursor: pointer;
    }
  }
}
</style>
